<template>
  <a-table :loading="loading"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
           :data-source="data"
           :scroll="{ x: 1300, y: 1000 }">
    <template #bodyCell="{index,column,text,record}">
      <template v-if="column.type === 'problemCol'">
        <span :style="{ color: scoreColor(record.submissionInfo[column.key]) }" >{{getScore(record.submissionInfo[column.key])}}</span>
      </template>
      <template v-else-if="column.type === 'userVO'">
        <a-tag :bordered="false" v-if="isMe(record.userInfo.userId)" color="processing">我</a-tag>
        <span>{{record.userInfo && record.userInfo[column.key]}}</span>
      </template>
      <template v-else-if="column.dataIndex === 'rank'">
        <span>{{text}}</span>
      </template>
      <template v-else>
        <span>{{text}}</span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import { SmileTwoTone } from '@ant-design/icons-vue';
import type { TableColumnsType } from 'ant-design-vue';
import {getContestRank, getProblemList, getProblemRefList} from "@/api/contest";
import {ColumnType} from "ant-design-vue/es/table/interface";
import useStore from "@/store/index"
const {user}  = useStore();
const contestId = ref();
const problemList = ref();
const loading = ref<boolean>(true)

onMounted(async () => {
  contestId.value = useRoute().params.contestId
  problemList.value = (await getProblemRefList(contestId.value)).data
  problemList.value.forEach(item => {
      const colItem = {
        title : item.seq,
        dataIndex : item.pid,
        type : "problemCol",
        key : item.pid
      } as ColumnType
      columns.push(colItem)
  })
  await init();
})

const init = async () => {
  loading.value = true;
  const res = (await getContestRank(contestId.value,{
    pageNum:pagination.current,
    pageSize:pagination.pageSize
  })).data

  data.value = res.rows;
  pagination.total = res.total;
  loading.value = false;

}
const columns = reactive<TableColumnsType>([
  { title: '排名', width: 100, dataIndex: 'rank', key: 'rank', fixed: 'left' },
  { title: '账号', dataIndex: 'userName', key: 'userName' , type: 'userVO',fixed: 'left' },
  { title: '昵称', width: 150, dataIndex: 'nickName', type: 'userVO',key: 'nickName'},
  { title: '总得分', dataIndex: 'totalScore',key: 'totalScore' },
]);

const pagination = reactive({
  total: 200,
  current: 1,
  pageSize: 1,
});
const handleTableChange = (p, filters, sorter) => {
  pagination.current = p.current
  pagination.pageSize= p.pageSize
  init();
}

const getScore = (item) => {
  if(item == null)
    return "--"
  return item.score
}
const data = ref()

const isMe = (userId) => {
  return userId == user.id;
}


const scoreColor = (item) => {
  if(item == null)
    return ''
  //console.log(item)
  if(item.score == item.oiRankScore)
    return 'rgb(82, 196, 26)'
  if(item.score == 0)
    return 'rgb(231, 76, 60)'

  return 'rgb(243, 156, 17)'
}
</script>

<style>
.status{
  color: #2f6ea7;
}
</style>
